import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:kxy_flutter_app/model/cert.dart';
import 'package:kxy_flutter_app/r.dart';

class CertItemWidget extends StatefulWidget {
  final CertProfile certProfile;
  final int index;
  CertItemWidget({Key key, @required this.certProfile, @required this.index}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _CertItemWidgetState();
  }
}

class _CertItemWidgetState extends State<CertItemWidget> {
  int colorIndex = 0;
  var colors = [
    Colors.orangeAccent.withOpacity(0.75),
    Colors.blue.withOpacity(0.75),
    Colors.brown.withOpacity(0.75),
    Colors.cyan.withOpacity(0.75),
    Colors.green.withOpacity(0.75),
    Colors.grey.withOpacity(0.75),
    Colors.indigo.withOpacity(0.75),
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: certItem(widget.certProfile),
    );
  }

  Widget bgStyle(Widget child, double width, double height) {
    return Container(
      margin: EdgeInsets.only(bottom: 15),
      child: Stack(
        children: [
          Image.asset(
            R.assetsCommonCardBg,
            fit: BoxFit.cover,
            height: height,
            width: width,
          ),
          Positioned(
            left: 0,
            top: 0,
            child: child,
          ),
        ],
      ),
    );
  }

  Widget certItem(CertProfile cert) {
    var width = MediaQuery.of(context).size.width - 40;
    var height = width / 2.4;
    var itemWidget = Container(
      width: width,
      height: height,
      padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
      decoration: BoxDecoration(
        color: getColor(),
        borderRadius: BorderRadius.circular(5),
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          certType(cert.certType),
          certNumber(cert.certNumber, cert.certName),
          Column(
            children: [
              certState(cert.certEndTime),
              certExpDate(cert.certEndTime),
            ],
          ),
        ],
      ),
    );

    return bgStyle(itemWidget, width, height);
  }

  Widget certType(String certType) {
    return Text(
      certType ?? '',
      style: TextStyle(
        fontSize: 14,
        color: Colors.white,
      ),
    );
  }

  Widget certNumber(String number, String certName) {
    var isEmptyNumber = number == null || number.isEmpty;
    return Text(
      isEmptyNumber ? '******************' : certName,
      style: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.bold,
        color: Colors.white,
      ),
    );
  }

  Widget certState(DateTime expDate) {
    bool isActive = expDate == null ? true : expDate.compareTo(DateTime.now()) > 0;
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          'CARD HOLDER',
          style: TextStyle(
            color: Colors.white54,
            fontSize: 11,
          ),
        ),
        Text(
          isActive ? '有效' : '已过期',
          style: TextStyle(
            color: isActive ? Colors.white : Colors.white54,
            fontSize: 11,
          ),
        ),
      ],
    );
  }

  Widget certExpDate(DateTime expDate) {
    var format = new DateFormat('yyyy/MM/dd');
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          'EXPIRATION DATE',
          style: TextStyle(
            color: Colors.white,
            fontSize: 12,
          ),
        ),
        Text(
          expDate == null ? '无期限' : format.format(expDate),
          style: TextStyle(
            color: Colors.white,
            fontSize: 12,
          ),
        ),
      ],
    );
  }

  Color getColor() {
    if (widget.index >= colors.length) {
      return colors[widget.index - colors.length];
    }
    return colors[widget.index];
  }
}
